awaitFont.loadAsync({
'josefin-sans-regular':require('./assets/fonts/JosefinSans-
Regular.ttf'),
'josefin-sans-bold':require('./assets/fonts/JosefinSans-
Bold.ttf'),
'josefin-sans-italic':require('./assets/fonts/JosefinSans-
Italic.ttf'),
'raleway-regular':require('./assets/fonts/Raleway-
Regular.ttf'),
'raleway-bold':require('./assets/fonts/Raleway-Bold.ttf'),
'raleway-italic':require('./assets/fonts/Raleway-
Italic.ttf'),
});
14. We'llalsoneedTextelementsfordisplayingtextineachofournewfont
families/variants.Notethatwe'llalsoneedtowrapallourTextelementsin
anotherViewelement,sinceJSXexpressionsrequirethattherebeonlyone
parentnode.We'realsonowpassingthestylepropertyanarrayofstylesto
applyinordertoconsolidatethefontSizeandpaddingstyleswe'llbeapplying
inthenextstep:
render(){
return(
<Viewstyle={styles.container}>
{
this.state.fontLoaded?(
<Viewstyle={styles.container}>
<Textstyle={[styles.josefinSans,
styles.textFormatting]}>
Hello,JosefinSans!
</Text>
<Textstyle={[styles.josefinSansBold,
styles.textFormatting]}>
Hello,JosefinSans!
</Text>
<Textstyle={[styles.josefinSansItalic,
styles.textFormatting]}>
Hello,JosefinSans!
</Text>
<Textstyle={[styles.raleway,styles.textFormatting]}>
Hello,Raleway!
</Text>
<Textstyle={[styles.ralewayBold,
styles.textFormatting]}>
Hello,Raleway!
</Text>
<Textstyle={[styles.ralewayItalic,
styles.textFormatting]}>
Hello,Raleway!
</Text>
</View>
):null
}
</View>
);
}
15. Allthat'slefttoapplyourcustomfontsistoaddthenewstylestothe